import React from 'react';
import { Row, Col, Table, Icon, Button, Switch, Modal, Form, Input, Tooltip, Select, message } from 'antd';
import '../less/Rent.less';
import axios from 'axios';
import intercept from '../../../utils/intercept';
import { config } from 'utils';
const FormItem = Form.Item;
const confirm = Modal.confirm;
const { Option } = Select;
class RentPaths extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            dataSource: [],
            onChange: this.onChange,
            loading: false,
            pagination: {
                current: 1,
                pageSize: 10
            },
            keyword: '',
            children: []
        }
    }
    onChange = (pagination, filters, sorter) => {
        this.getPathInfo({
            sortField: sorter.field,
            sortOrder: sorter.order,
            page: pagination.current,
            keyword: this.state.keyword,
            ...filters
        });
    };
    componentDidMount() {
        this.getPathInfo();
        this.getUnitsName();
    };
    getUnitsName = () => {
        let that = this;
        const token = sessionStorage.getItem("token");
        axios
            .get(`${config.api}User/GetOrgans`, { headers: { Authorization: 'Bearer ' + token } })
            .then((data) => {
                if(data.data.result){
                    data.data.userOrgans.map(function (val, index) {
                        that.state.children.push(<Option key={val.organCode}>{val.organName}</Option>)
                    })
                }
            })
            .catch(err => {
                intercept;
            })
    }
    getPathInfo = (params = {}) => {
        const token = sessionStorage.getItem("token");
        this.setState({ loading: true });
        var keyword = typeof (params.keyword) === "undefined"
            ? ''
            : params.keyword;
        axios
            .get(`${config.api}Rental/GetCarLines?page=${params.page}&pageSize=${this.state.pagination.pageSize}&keyword=${keyword}`, { headers: { Authorization: 'Bearer ' + token } })
            .then((data) => {
                const pagination = {
                    ...this.state.pagination
                };
                pagination.total = data.data.pageList.totalRows;
                pagination.current = params.page;
                this.setState({ loading: false, dataSource: data.data.pageList.collections, pagination });
            })
            .catch(err => {
                intercept;
            })
    }
    SwitchOnChange = (checked, productCode) => {
        const token = sessionStorage.getItem("token");
        axios
            .post(`${config.api}Rental/EnableRentalCarLine`, { lineid: productCode, isEnable: checked }, { headers: { Authorization: 'Bearer ' + token } })
            .then((res) => {
                if (checked) {
                    message.success('您已开启该线路');
                } else {
                    message.warning('您已关闭该线路');
                }
            })
            .catch(err => {
                intercept;
            })
    }

    FormReset = (e) => {
        this
            .props
            .form
            .resetFields();
    }

    ////  !----------------------编辑路线----------------------->
    // 模态框事件
    showModal = (e, record) => {
        this.setState({
            visible: true,
            CompileisEnables: record.isEnable
        });
        this.lineIDs = record.id;
        this.props.form.setFieldsValue({
            CompileName: record.lineName,
            CompileOnCity: record.startCity,
            CompileOffCity: record.endCity,
            CompileLoad: record.passengerCount,
            CompilePackagePrice: record.charteredPrice,
            CompileKm: record.totalMiles,
            CompileSpellPrice: record.carpoolingPrice,
            CompilePathDescribe: record.lineDescription,
            CompileisEnable: record.isEnable,
        });
    }

    removePath = (e, record) => {
        let that = this;
        confirm({
            title: '确定删除该条线路？',
            okText: '确定',
            okType: 'danger',
            cancelText: '取消',
            onOk() {
                let token = sessionStorage.getItem("token");
                axios.post(`${config.api}Rental/DeleteRentalCarLine`, {
                    lineid: record.id,
                }, { headers: { Authorization: 'Bearer ' + token } }).then((data) => {
                    if (data.data.result) {
                        that.getPathInfo();
                        message.success('您已移除该线路！');
                    } else {
                        message.warning(data.data.errorMessage);
                    }
                })
                .catch(err => {
                    intercept;
                })
            },
            onCancel() {
            },
        });

    }
    handleReset = (e) => {
        this
            .props
            .form
            .resetFields();
        this.setState({
            visible: false,
        });
    }
    // 下拉选项事件触发
    handleSelectChange = (e) => {
        this.setState({
            companyCode: e
        })
    }
    // 表单提交
    CompilePathSubmit = (e) => {
        e.preventDefault();
        let token = sessionStorage.getItem("token");
        let params = this.props.form.getFieldsValue();
        axios.post(`${config.api}Rental/EditRentalCarLine`, {
            lineid: this.lineIDs,
            lineName: params.CompileName, startCity: params.CompileOnCity, endCity: params.CompileOffCity,
            miles: params.CompileKm, fixSeats: params.CompileLoad, bPrice: params.CompilePackagePrice,
            pPrice: params.CompileSpellPrice, desc: params.CompilePathDescribe, isEnable: params.CompileisEnable,
            companyCode: this.state.companyCode
        }, { headers: { Authorization: 'Bearer ' + token } }).then((data) => {
            if (data.data.result) {
                this.getPathInfo();
                this.handleReset();
                message.success('编辑成功');
            } else {
                message.warning(data.data.errorMessage);
            }
        }).catch(err => {
            intercept;
        })
    }

    ////  !----------------------添加线路----------------------->
    // 模态框显示
    AddPathModal = (e, record) => {
        this.setState({
            addPathModalShow: true,
        });
    }
    addPathModalHide = () => {
        this.setState({
            addPathModalShow: false,
        });
        this
            .props
            .form
            .resetFields();
    }
    // 表单提交
    AddPathSubmit = (e) => {
        e.preventDefault();
        let token = sessionStorage.getItem("token");
        let params = this.props.form.getFieldsValue();
        axios.post(`${config.api}Rental/EditRentalCarLine`, {
            lineid: 0,
            lineName: params.AddName, startCity: params.AddOnCity, endCity: params.AddOffCity,
            miles: params.AddKm, fixSeats: params.AddLoad, bPrice: params.AddPackagePrice,
            pPrice: params.AddSpellPrice, desc: params.AddPathDescribe, isEnable: params.AddisEnable,
            companyCode: this.state.companyCode
        }, { headers: { Authorization: 'Bearer ' + token } }).then((data) => {
            if (data.data.result) {
                this.getPathInfo();
                this.addPathModalHide();
                message.success('添加线路成功！');
            } else {
                message.warning('添加线路失败！');
            }
        }).catch(err => {
            intercept;
        })
    }


    render() {
        const columns = [{
            title: '线路名称',
            dataIndex: 'lineName',
            key: 'lineName',
            width: 300,
            render: text => <a>{text}</a>,
        }, {
            title: '出发城市',
            dataIndex: 'startCity',
            key: 'startCity',
            width: 150
        }, {
            title: '目的城市',
            dataIndex: 'endCity',
            key: 'endCity',
            width: 150
        }, {
            title: '包车价(元)',
            dataIndex: 'charteredPrice',
            key: 'charteredPrice',
            width:80
        }, {
            title: '拼车价(元)',
            dataIndex: 'carpoolingPrice',
            key: 'carpoolingPrice',
            width:80
        }, {
            title: '里程/km',
            dataIndex: 'totalMiles',
            key: 'totalMiles',
            width:80
        }, {
            title: '描述',
            dataIndex: 'lastUpdateOperator',
            key: 'lastUpdateOperator',
            width: 330
        }, {
            title: '启用',
            dataIndex: 'isEnable',
            key: 'companyId',
            width: 80,
            render: (text, record) => {
                return (
                    <Switch defaultChecked={record.isEnable} onChange={(checked, productCode) => { this.SwitchOnChange(checked, record.id) }} />
                )
            }
        }, {
            title: '操作',
            width: 170,
            render: (text, record) => {
                return (
                    <span>
                        <Button type="primary" onClick={(e, record) => { this.showModal(e, text) }}>编辑</Button>
                        <Button type="danger" className="deleteBtn" onClick={(e, record) => { this.removePath(e, text) }}>删除</Button>
                    </span>
                )
            }
        }];
        const formItemLayout = {
            labelCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 6
                }
            },
            wrapperCol: {
                xs: {
                    span: 24
                },
                sm: {
                    span: 14
                }
            }
        };
        const { getFieldDecorator } = this.props.form;


        return (
            <div>
                {/* 添加线路 */}
                <Modal
                    title="编辑线路"
                    visible={this.state.addPathModalShow}
                    footer={null}
                    width={700}
                    onCancel={this.addPathModalHide}>
                    <Form onSubmit={this.AddPathSubmit}>
                        <Row>
                            <Col span={12}>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            线路名称
                      <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('AddName', {
                                        rules: [
                                            {
                                                required: true,
                                                message: 'Please input your traderaccount!',
                                                whitespace: true
                                            }
                                        ]
                                    })(<Input />)}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            出发城市
                      <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('AddOnCity', {
                                        rules: [
                                            {
                                                required: true,
                                                message: 'Please input your traderaccount!',
                                                whitespace: true,
                                            }
                                        ]
                                    })(<Input />)}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            目的城市
                      <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('AddOffCity', {
                                        rules: [
                                            {
                                                required: true,
                                                message: 'Please input your traderaccount!',
                                                whitespace: true,
                                            }
                                        ]
                                    })(<Input />)}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            里程/km
                      <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('AddKm', {
                                        rules: [
                                            {
                                                required: true,
                                                message: 'Please input your traderaccount!',
                                                whitespace: true
                                            }
                                        ]
                                    })(<Input type="number" />)}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            载客量/人
                      <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('AddLoad', {
                                        rules: [
                                            {
                                                required: true,
                                                message: 'Please input your traderaccount!',
                                                whitespace: true
                                            }
                                        ]
                                    })(<Input type="number" />)}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            包车价/元
                      <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('AddPackagePrice', {
                                        rules: [
                                            {
                                                required: true,
                                                message: 'Please input your traderaccount!',
                                                whitespace: true
                                            }
                                        ]
                                    })(<Input type="number" />)}
                                </FormItem>

                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            拼车价/元
                      <Tooltip title="用户缴纳的保险金额">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('AddSpellPrice', {
                                        rules: [
                                            {
                                                required: true,
                                                message: 'Please input your traderaccount!',
                                                whitespace: true
                                            }
                                        ]
                                    })(<Input type="number" />)}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            线路描述
                      <Tooltip title="赔给用户的额度">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('AddPathDescribe', {
                                        rules: [
                                            {
                                                required: true,
                                                message: 'Please input your traderaccount!',
                                                whitespace: true
                                            }
                                        ]
                                    })(<Input type="textarea" />)}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            线路所属单位
                      <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('AddPathAuthor', {
                                        rules: [
                                            {
                                                required: true,
                                                message: 'Please input your traderaccount!',
                                                whitespace: true
                                            }
                                        ]
                                    })(<Select
                                        placeholder="请选择所属单位"
                                        onChange={this.handleSelectChange}
                                    >
                                        {this.state.children}
                                        {/* <Option value="male">male</Option>

                                        <Option value="female">female</Option> */}
                                    </Select>)}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            是否启用
                      <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('AddisEnable', {
                                        rules: [
                                            {
                                                required: true,
                                                type: 'boolean',
                                                message: 'Please input your traderaccount!',
                                                whitespace: true
                                            }
                                        ]
                                    })(<Switch defaultChecked={false} />)}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <FormItem className="center">
                                    <Button onClick={this.FormReset}>重置重置</Button>
                                    <Button type="primary" htmlType="submit">确定</Button>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Modal>

                {/* 线路编辑 */}
                <Modal
                    title="编辑线路"
                    visible={this.state.visible}
                    footer={null}
                    width={700}
                    onCancel={this.handleReset}>
                    <Form onSubmit={this.CompilePathSubmit}>
                        <Row>
                            <Col span={12}>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            线路名称
  <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('CompileName', {
                                        rules: [
                                            {
                                                required: true,
                                                message: 'Please input your traderaccount!',
                                                whitespace: true
                                            }
                                        ]
                                    })(<Input />)}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            出发城市
  <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('CompileOnCity', {
                                        rules: [
                                            {
                                                required: true,
                                                message: 'Please input your traderaccount!',
                                                whitespace: true,
                                            }
                                        ]
                                    })(<Input />)}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            目的城市
  <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('CompileOffCity', {
                                        rules: [
                                            {
                                                required: true,
                                                message: 'Please input your traderaccount!',
                                                whitespace: true,
                                            }
                                        ]
                                    })(<Input />)}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            里程/km
  <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('CompileKm', {
                                        rules: [
                                            {
                                                required: true,
                                                message: 'Please input your traderaccount!',
                                                whitespace: true
                                            }
                                        ]
                                    })(<Input type="number" />)}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            载客量/人
  <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('CompileLoad', {
                                        rules: [
                                            {
                                                required: true,
                                                message: 'Please input your traderaccount!',
                                                whitespace: true
                                            }
                                        ]
                                    })(<Input type="number" />)}
                                </FormItem>
                            </Col>
                            <Col span={12}>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            包车价/元
  <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('CompilePackagePrice', {
                                        rules: [
                                            {
                                                required: true,
                                                message: 'Please input your traderaccount!',
                                                whitespace: true
                                            }
                                        ]
                                    })(<Input type="number" />)}
                                </FormItem>

                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            拼车价/元
  <Tooltip title="用户缴纳的保险金额">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('CompileSpellPrice', {
                                        rules: [
                                            {
                                                required: true,
                                                message: 'Please input your traderaccount!',
                                                whitespace: true
                                            }
                                        ]
                                    })(<Input type="number" />)}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            线路描述
  <Tooltip title="赔给用户的额度">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('CompilePathDescribe', {
                                        rules: [
                                            {
                                                required: true,
                                                message: 'Please input your traderaccount!',
                                                whitespace: true
                                            }
                                        ]
                                    })(<Input type="textarea" />)}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            线路所属单位
  <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('CompilePathAuthor', {
                                        rules: [
                                            {
                                                required: true,
                                                message: 'Please input your traderaccount!',
                                                whitespace: true
                                            }
                                        ]
                                    })(<Select
                                        placeholder="请选择所属单位"
                                        onChange={this.handleSelectChange}
                                    >
                                        {this.state.children}


{/* 所属单位 */}



                                    </Select>)}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label={(
                                        <span>
                                            是否启用
  <Tooltip title="自动填充">
                                                <Icon type="question-circle-o" />
                                            </Tooltip>
                                        </span>
                                    )}
                                    hasFeedback>
                                    {getFieldDecorator('CompileisEnable', {
                                        rules: [
                                            {
                                                required: true,
                                                type: 'boolean',
                                                message: 'Please input your traderaccount!',
                                            }
                                        ]
                                    })(<Switch defaultChecked={this.state.CompileisEnables} />)}
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span={24}>
                                <FormItem className="center">
                                    <Button onClick={this.FormReset}>重置</Button>{' '}
                                    <Button type="primary" htmlType="submit">确定</Button>
                                </FormItem>
                            </Col>
                        </Row>
                    </Form>
                </Modal>

                <Button type="primary" className="addPath" onClick={this.AddPathModal}>添加路线</Button>
                <Table
                    rowKey={record => record.id}
                    bordered={true}
                    className="components-table-demo-nested tables"
                    columns={columns}
                    {...this.state}
                />
            </div>
        )
    }
}

const RentPath = Form.create()(RentPaths);
export default RentPath


